<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线下组局小程序 - 2025年宝塔面板部署方案</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
            line-height: 1.8;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background-color: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 40px;
            border-bottom: 4px solid #3498db;
            padding-bottom: 20px;
            font-size: 2.5em;
            font-weight: 700;
        }
        h2 {
            color: #3498db;
            margin-top: 40px;
            margin-bottom: 25px;
            border-left: 5px solid #3498db;
            padding-left: 20px;
            font-size: 1.8em;
        }
        h3 {
            color: #2980b9;
            margin-top: 25px;
            margin-bottom: 15px;
            font-size: 1.4em;
        }
        .hero-section {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
            padding: 40px;
            border-radius: 15px;
            margin-bottom: 40px;
            text-align: center;
        }
        .hero-section h1 {
            color: white;
            border-bottom: none;
            margin-bottom: 20px;
        }
        .hero-section p {
            font-size: 1.2em;
            margin: 0;
        }
        .deployment-steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin: 40px 0;
        }
        .step-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 2px solid #dee2e6;
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .step-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }
        .step-number {
            position: absolute;
            top: -10px;
            right: -10px;
            background: #3498db;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2em;
        }
        .step-card h3 {
            color: #2c3e50;
            margin-top: 10px;
        }
        .code-block {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            border-left: 4px solid #3498db;
        }
        .code-block code {
            color: #ecf0f1;
            font-size: 14px;
            line-height: 1.5;
        }
        .config-table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .config-table th, .config-table td {
            border: 1px solid #dee2e6;
            padding: 15px;
            text-align: left;
        }
        .config-table th {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
            font-weight: 600;
        }
        .config-table tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        .config-table tr:hover {
            background-color: #e3f2fd;
        }
        .step-list {
            counter-reset: step-counter;
            list-style: none;
            padding-left: 0;
        }
        .step-list li {
            counter-increment: step-counter;
            margin-bottom: 20px;
            padding-left: 50px;
            position: relative;
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px 20px 20px 70px;
        }
        .step-list li::before {
            content: counter(step-counter);
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.1em;
        }
        .warning-box {
            background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
            border: 2px solid #f39c12;
            color: #856404;
            padding: 20px;
            border-radius: 12px;
            margin: 25px 0;
            position: relative;
        }
        .warning-box::before {
            content: "⚠️";
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 1.5em;
        }
        .warning-box-content {
            padding-left: 40px;
        }
        .success-box {
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
            border: 2px solid #28a745;
            color: #155724;
            padding: 20px;
            border-radius: 12px;
            margin: 25px 0;
            position: relative;
        }
        .success-box::before {
            content: "✅";
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 1.5em;
        }
        .success-box-content {
            padding-left: 40px;
        }
        .info-box {
            background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
            border: 2px solid #17a2b8;
            color: #0c5460;
            padding: 20px;
            border-radius: 12px;
            margin: 25px 0;
            position: relative;
        }
        .info-box::before {
            content: "ℹ️";
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 1.5em;
        }
        .info-box-content {
            padding-left: 40px;
        }
        .toc {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 2px solid #dee2e6;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 40px;
        }
        .toc h3 {
            margin-top: 0;
            color: #495057;
            text-align: center;
            font-size: 1.5em;
        }
        .toc ul {
            list-style-type: none;
            padding-left: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 10px;
        }
        .toc li {
            margin: 8px 0;
        }
        .toc a {
            color: #007bff;
            text-decoration: none;
            padding: 8px 12px;
            border-radius: 6px;
            transition: all 0.3s ease;
            display: block;
        }
        .toc a:hover {
            background-color: #007bff;
            color: white;
            transform: translateX(5px);
        }
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        .feature-item {
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
        }
        .feature-item:hover {
            border-color: #3498db;
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .feature-item h4 {
            color: #2c3e50;
            margin-top: 0;
            font-size: 1.1em;
        }
        .version-badge {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: bold;
            display: inline-block;
            margin-left: 10px;
        }
        .terminal {
            background-color: #1e1e1e;
            color: #00ff00;
            padding: 20px;
            border-radius: 12px;
            font-family: 'Consolas', 'Monaco', monospace;
            margin: 20px 0;
            border-left: 4px solid #00ff00;
        }
        .system-requirements {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        .req-card {
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
        }
        .req-card h4 {
            color: #3498db;
            margin-top: 0;
        }
        .req-card .value {
            font-size: 1.5em;
            font-weight: bold;
            color: #2c3e50;
            margin: 10px 0;
        }
        .footer {
            margin-top: 50px;
            text-align: center;
            color: #666;
            font-size: 14px;
            border-top: 2px solid #dee2e6;
            padding-top: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="hero-section">
            <h1>🚀 线下组局小程序 - 2025年宝塔面板部署方案</h1>
            <p>基于Node.js + Express + MongoDB的现代化部署指南</p>
            <p><span class="version-badge">2025最新版</span></p>
        </div>

        <div class="toc">
            <h3>📋 部署指南目录</h3>
            <ul>
                <li><a href="#overview">1. 部署概述</a></li>
                <li><a href="#requirements">2. 系统要求</a></li>
                <li><a href="#baota-install">3. 宝塔面板安装</a></li>
                <li><a href="#environment-setup">4. 环境配置</a></li>
                <li><a href="#project-deploy">5. 项目部署</a></li>
                <li><a href="#domain-ssl">6. 域名与SSL配置</a></li>
                <li><a href="#pm2-config">7. PM2进程管理</a></li>
                <li><a href="#monitoring">8. 监控与维护</a></li>
                <li><a href="#troubleshooting">9. 常见问题</a></li>
                <li><a href="#optimization">10. 性能优化</a></li>
            </ul>
        </div>

        <section id="overview">
            <h2>1. 部署概述</h2>
            <div class="info-box">
                <div class="info-box-content">
                    <strong>📖 说明：</strong> 本指南基于2025年最新版本的宝塔面板（9.2.0+），提供完整的Node.js + Express项目部署方案。
                </div>
            </div>
            
            <div class="feature-grid">
                <div class="feature-item">
                    <h4>🎯 一键部署</h4>
                    <p>宝塔面板提供图形化界面，简化部署流程</p>
                </div>
                <div class="feature-item">
                    <h4>⚡ 高性能</h4>
                    <p>优化的Node.js运行环境，支持多进程管理</p>
                </div>
                <div class="feature-item">
                    <h4>🔒 安全可靠</h4>
                    <p>内置防火墙、SSL证书、安全防护功能</p>
                </div>
                <div class="feature-item">
                    <h4>📊 监控完善</h4>
                    <p>实时监控服务器状态和应用性能</p>
                </div>
            </div>

            <div class="deployment-steps">
                <div class="step-card">
                    <div class="step-number">1</div>
                    <h3>环境准备</h3>
                    <p>安装宝塔面板和基础环境</p>
                </div>
                <div class="step-card">
                    <div class="step-number">2</div>
                    <h3>项目配置</h3>
                    <p>配置Node.js环境和数据库</p>
                </div>
                <div class="step-card">
                    <div class="step-number">3</div>
                    <h3>应用部署</h3>
                    <p>上传项目并启动服务</p>
                </div>
                <div class="step-card">
                    <div class="step-number">4</div>
                    <h3>域名绑定</h3>
                    <p>配置域名和SSL证书</p>
                </div>
            </div>
        </section>

        <section id="requirements">
            <h2>2. 系统要求</h2>
            
            <div class="system-requirements">
                <div class="req-card">
                    <h4>操作系统</h4>
                    <div class="value">CentOS 7.6+</div>
                    <p>推荐CentOS 8+ 或 Ubuntu 20.04+</p>
                </div>
                <div class="req-card">
                    <h4>内存</h4>
                    <div class="value">4GB+</div>
                    <p>推荐8GB以上内存</p>
                </div>
                <div class="req-card">
                    <h4>存储</h4>
                    <div class="value">50GB+</div>
                    <p>SSD硬盘，推荐100GB以上</p>
                </div>
                <div class="req-card">
                    <h4>带宽</h4>
                    <div class="value">5M+</div>
                    <p>推荐10M以上带宽</p>
                </div>
            </div>

            <h3>软件版本要求</h3>
            <table class="config-table">
                <tr>
                    <th>软件名称</th>
                    <th>最低版本</th>
                    <th>推荐版本</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td>宝塔面板</td>
                    <td>7.7.0</td>
                    <td>9.2.0+</td>
                    <td>2025年最新版本</td>
                </tr>
                <tr>
                    <td>Node.js</td>
                    <td>16.0.0</td>
                    <td>18.19.0+</td>
                    <td>LTS版本</td>
                </tr>
                <tr>
                    <td>MongoDB</td>
                    <td>4.4.0</td>
                    <td>6.0.5+</td>
                    <td>数据库服务</td>
                </tr>
                <tr>
                    <td>PM2</td>
                    <td>4.0.0</td>
                    <td>5.3.0+</td>
                    <td>进程管理器</td>
                </tr>
                <tr>
                    <td>Nginx</td>
                    <td>1.18.0</td>
                    <td>1.25.3+</td>
                    <td>反向代理</td>
                </tr>
            </table>
        </section>

        <section id="baota-install">
            <h2>3. 宝塔面板安装</h2>
            
            <h3>3.1 安装前准备</h3>
            <ol class="step-list">
                <li>
                    <strong>更新系统</strong>
                    <div class="code-block">
                        <code># CentOS系统
yum update -y

# Ubuntu系统
apt update && apt upgrade -y

# 安装基础工具
yum install -y curl wget git unzip zip</code>
                    </div>
                </li>
                <li>
                    <strong>关闭防火墙和SELinux（CentOS）</strong>
                    <div class="code-block">
                        <code># 关闭防火墙
systemctl stop firewalld
systemctl disable firewalld

# 关闭SELinux
setenforce 0
sed -i 's/SELINUX=enforcing/SELINUX=disabled/g' /etc/selinux/config</code>
                    </div>
                </li>
            </ol>

            <h3>3.2 安装宝塔面板</h3>
            <div class="warning-box">
                <div class="warning-box-content">
                    <strong>⚠️ 注意：</strong> 安装宝塔面板会自动安装LNMP环境，请确保服务器有足够的磁盘空间。
                </div>
            </div>

            <div class="code-block">
                <code># 官方推荐安装命令（CentOS）
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

# Ubuntu系统安装命令
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

# Docker快速安装（推荐）
docker run -d --name baota --restart=always -p 8888:8888 -p 888:888 -p 80:80 -p 443:443 -p 8889:8889 -v ~/wwwroot:/www/wwwroot btpanel/baota:lnmp</code>
            </div>

            <h3>3.3 访问宝塔面板</h3>
            <p>安装完成后，会显示面板访问信息：</p>
            <div class="terminal">
                <code>==================================================================
BT-Panel default info!
==================================================================
外网面板地址: http://your_server_ip:8888/your_panel_id
内网面板地址: http://localhost:8888/your_panel_id
username: your_username
password: your_password
==================================================================</code>
            </div>

            <div class="success-box">
                <div class="success-box-content">
                    <strong>✅ 安装完成：</strong> 请妥善保存面板登录信息，建议首次登录后立即修改密码。
                </div>
            </div>
        </section>

        <section id="environment-setup">
            <h2>4. 环境配置</h2>
            
            <h3>4.1 安装Node.js环境</h3>
            <ol class="step-list">
                <li>
                    <strong>登录宝塔面板</strong>
                    <p>使用浏览器访问面板地址，输入用户名和密码登录。</p>
                </li>
                <li>
                    <strong>安装Node.js版本管理器</strong>
                    <p>在宝塔面板中，进入【软件商店】，搜索"Node.js版本管理器"并安装。</p>
                </li>
                <li>
                    <strong>安装Node.js</strong>
                    <p>打开Node.js版本管理器，选择Node.js 18.19.0+版本进行安装。</p>
                    <div class="code-block">
                        <code># 或通过命令行安装（推荐版本）
nvm install 18.19.0
nvm use 18.19.0
nvm alias default 18.19.0

# 验证安装
node --version
npm --version</code>
                    </div>
                </li>
            </ol>

            <h3>4.2 安装MongoDB</h3>
            <ol class="step-list">
                <li>
                    <strong>在软件商店安装MongoDB</strong>
                    <p>在宝塔面板【软件商店】中搜索"MongoDB"，选择6.0.5+版本安装。</p>
                </li>
                <li>
                    <strong>配置MongoDB</strong>
                    <div class="code-block">
                        <code># 连接MongoDB
mongo

# 创建数据库和用户
use park_app
db.createUser({
  user: "park_user",
  pwd: "your_secure_password",
  roles: [{ role: "readWrite", db: "park_app" }]
})

# 验证用户
db.auth("park_user", "your_secure_password")</code>
                    </div>
                </li>
                <li>
                    <strong>设置MongoDB远程访问</strong>
                    <p>在MongoDB配置文件中添加：</p>
                    <div class="code-block">
                        <code># /www/server/mongodb/mongodb.conf
net:
  port: 27017
  bindIp: 0.0.0.0

security:
  authorization: enabled</code>
                    </div>
                </li>
            </ol>

            <h3>4.3 安装PM2</h3>
            <div class="code-block">
                <code># 全局安装PM2
npm install -g pm2@latest

# 验证安装
pm2 --version

# 安装PM2日志轮转插件
pm2 install pm2-logrotate</code>
            </div>

            <h3>4.4 配置环境变量</h3>
            <p>在项目根目录创建.env文件：</p>
            <div class="code-block">
                <code># 服务器配置
PORT=3000
NODE_ENV=production
APP_URL=https://yourdomain.com

# 数据库配置
MONGODB_URI=mongodb://park_user:your_secure_password@localhost:27017/park_app

# JWT配置
JWT_SECRET=your_super_secret_key_2025
JWT_EXPIRE=7d

# Cloudinary配置
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# 微信小程序配置
WECHAT_APP_ID=your_wechat_app_id
WECHAT_APP_SECRET=your_wechat_app_secret</code>
            </div>
        </section>

        <section id="project-deploy">
            <h2>5. 项目部署</h2>
            
            <h3>5.1 上传项目文件</h3>
            <ol class="step-list">
                <li>
                    <strong>创建网站目录</strong>
                    <p>在宝塔面板【网站】中，添加站点，设置网站目录为：</p>
                    <div class="code-block">
                        <code>/www/wwwroot/yourdomain.com</code>
                    </div>
                </li>
                <li>
                    <strong>上传项目文件</strong>
                    <p>使用以下任一方式上传项目：</p>
                    <ul>
                        <li>宝塔面板文件管理器上传ZIP压缩包</li>
                        <li>使用Git拉取代码（推荐）</li>
                        <li>SFTP工具上传</li>
                    </ul>
                    <div class="code-block">
                        <code># 使用Git拉取代码
cd /www/wwwroot/yourdomain.com
git clone https://github.com/yourusername/park-node.git .
chown -R www:www .</code>
                    </div>
                </li>
                <li>
                    <strong>安装项目依赖</strong>
                    <div class="code-block">
                        <code>cd /www/wwwroot/yourdomain.com
npm install --production</code>
                    </div>
                </li>
            </ol>

            <h3>5.2 构建项目</h3>
            <div class="code-block">
                <code># 构建项目
npm run build

# 检查构建结果
ls -la dist/</code>
            </div>

            <h3>5.3 创建PM2配置文件</h3>
            <p>在项目根目录创建ecosystem.config.js文件：</p>
            <div class="code-block">
                <code>module.exports = {
  apps: [{
    name: 'park-app',
    script: 'app.js',
    instances: 'max',
    exec_mode: 'cluster',
    autorestart: true,
    watch: false,
    max_memory_restart: '1G',
    env: {
      NODE_ENV: 'production',
      PORT: 3000
    },
    env_production: {
      NODE_ENV: 'production'
    },
    log_file: '/www/wwwroot/yourdomain.com/logs/combined.log',
    out_file: '/www/wwwroot/yourdomain.com/logs/out.log',
    error_file: '/www/wwwroot/yourdomain.com/logs/error.log',
    log_date_format: 'YYYY-MM-DD HH:mm:ss Z',
    merge_logs: true,
    time: true
  }]
};</code>
            </div>

            <h3>5.4 启动应用</h3>
            <div class="code-block">
                <code># 创建日志目录
mkdir -p /www/wwwroot/yourdomain.com/logs

# 启动应用
pm2 start ecosystem.config.js --env production

# 查看应用状态
pm2 status

# 查看应用日志
pm2 logs park-app

# 保存PM2配置
pm2 save

# 设置开机自启
pm2 startup</code>
            </div>
        </section>

        <section id="domain-ssl">
            <h2>6. 域名与SSL配置</h2>
            
            <h3>6.1 域名解析</h3>
            <ol class="step-list">
                <li>
                    <strong>添加A记录</strong>
                    <p>在域名解析服务商处添加A记录：</p>
                    <div class="code-block">
                        <code>记录类型: A
主机记录: @
记录值: your_server_ip
TTL: 600</code>
                    </div>
                </li>
                <li>
                    <strong>添加www记录（可选）</strong>
                    <div class="code-block">
                        <code>记录类型: A
主机记录: www
记录值: your_server_ip
TTL: 600</code>
                    </div>
                </li>
            </ol>

            <h3>6.2 宝塔面板站点配置</h3>
            <ol class="step-list">
                <li>
                    <strong>添加站点</strong>
                    <p>在宝塔面板【网站】中点击【添加站点】，输入域名并选择网站目录。</p>
                </li>
                <li>
                    <strong>配置反向代理</strong>
                    <p>在站点设置中，点击【反向代理】，添加代理配置：</p>
                    <div class="code-block">
                        <code>代理名称: node-app
目标URL: http://localhost:3000
发送域名: $host</code>
                    </div>
                </li>
                <li>
                    <strong>配置伪静态</strong>
                    <p>在站点设置中，点击【伪静态】，添加以下规则：</p>
                    <div class="code-block">
                        <code>location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_cache_bypass $http_upgrade;
    proxy_connect_timeout 60s;
    proxy_send_timeout 60s;
    proxy_read_timeout 60s;
}</code>
                    </div>
                </li>
            </ol>

            <h3>6.3 SSL证书配置</h3>
            <ol class="step-list">
                <li>
                    <strong>申请SSL证书</strong>
                    <p>在宝塔面板【网站】中，选择站点，点击【SSL】，选择【Let's Encrypt】申请免费证书。</p>
                </li>
                <li>
                    <strong>强制HTTPS</strong>
                    <p>在SSL设置中，开启【强制HTTPS】选项。</p>
                </li>
                <li>
                    <strong>配置HSTS（可选）</strong>
                    <div class="code-block">
                        <code># 在站点配置文件中添加
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;</code>
                    </div>
                </li>
            </ol>

            <div class="success-box">
                <div class="success-box-content">
                    <strong>✅ 配置完成：</strong> 您的网站现在可以通过HTTPS安全访问了。
                </div>
            </div>
        </section>

        <section id="pm2-config">
            <h2>7. PM2进程管理</h2>
            
            <h3>7.1 PM2常用命令</h3>
            <table class="config-table">
                <tr>
                    <th>命令</th>
                    <th>说明</th>
                    <th>示例</th>
                </tr>
                <tr>
                    <td>pm2 start</td>
                    <td>启动应用</td>
                    <td>pm2 start app.js</td>
                </tr>
                <tr>
                    <td>pm2 stop</td>
                    <td>停止应用</td>
                    <td>pm2 stop park-app</td>
                </tr>
                <tr>
                    <td>pm2 restart</td>
                    <td>重启应用</td>
                    <td>pm2 restart park-app</td>
                </tr>
                <tr>
                    <td>pm2 delete</td>
                    <td>删除应用</td>
                    <td>pm2 delete park-app</td>
                </tr>
                <tr>
                    <td>pm2 list</td>
                    <td>查看应用列表</td>
                    <td>pm2 list</td>
                </tr>
                <tr>
                    <td>pm2 logs</td>
                    <td>查看日志</td>
                    <td>pm2 logs park-app</td>
                </tr>
                <tr>
                    <td>pm2 monit</td>
                    <td>监控面板</td>
                    <td>pm2 monit</td>
                </tr>
            </table>

            <h3>7.2 PM2监控配置</h3>
            <div class="code-block">
                <code># 安装PM2监控插件
pm2 install pm2-web

# 启动监控面板
pm2-web

# 配置监控仪表板
pm2 install pm2-server-monit
pm2 server-monit</code>
            </div>

            <h3>7.3 日志管理</h3>
            <div class="code-block">
                <code># 配置日志轮转
pm2 install pm2-logrotate

# 查看日志配置
pm2 conf pm2-logrotate

# 清理旧日志
pm2 flush

# 查看日志大小
pm2 logs park-app --lines 100</code>
            </div>

            <h3>7.4 自动重启配置</h3>
            <div class="code-block">
                <code># 设置内存限制自动重启
pm2 set park-app max_memory_restart 1G

# 设置文件监控（开发环境）
pm2 start app.js --watch

# 设置定时重启
pm2 restart park-app --cron-restart="0 4 * * *"</code>
            </div>
        </section>

        <section id="monitoring">
            <h2>8. 监控与维护</h2>
            
            <h3>8.1 宝塔面板监控</h3>
            <ul>
                <li><strong>系统监控：</strong>实时查看CPU、内存、磁盘使用情况</li>
                <li><strong>网站监控：</strong>监控网站访问量、响应时间</li>
                <li><strong>数据库监控：</strong>MongoDB连接数、查询性能</li>
                <li><strong>安全监控：</strong>登录日志、操作记录</li>
            </ul>

            <h3>8.2 应用监控</h3>
            <div class="code-block">
                <code># 安装应用监控依赖
npm install --save express-prometheus-middleware prom-client

# 在app.js中添加监控中间件
const promBundle = require("express-prometheus-middleware");
const app = express();

app.use(promBundle({
  includeMethod: true,
  includePath: true,
  promClient: {
    collectDefaultMetrics: {
      timeout: 5000
    }
  }
}));

// 监控端点
app.get('/metrics', (req, res) => {
  res.end(promClient.register.metrics());
});</code>
            </div>

            <h3>8.3 定期维护任务</h3>
            <table class="config-table">
                <tr>
                    <th>任务</th>
                    <th>频率</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>系统更新</td>
                    <td>每周</td>
                    <td>宝塔面板一键更新</td>
                </tr>
                <tr>
                    <td>数据库备份</td>
                    <td>每日</td>
                    <td>宝塔面板计划任务</td>
                </tr>
                <tr>
                    <td>日志清理</td>
                    <td>每周</td>
                    <td>PM2日志轮转</td>
                </tr>
                <tr>
                    <td>SSL证书续期</td>
                    <td>自动</td>
                    <td>宝塔面板自动续期</td>
                </tr>
                <tr>
                    <td>安全检查</td>
                    <td>每月</td>
                    <td>宝塔面板安全扫描</td>
                </tr>
            </table>

            <h3>8.4 备份策略</h3>
            <div class="code-block">
                <code># 创建备份脚本
cat > /www/backup.sh << 'EOF'
#!/bin/bash

# 设置备份目录
BACKUP_DIR="/www/backup"
DATE=$(date +%Y%m%d_%H%M%S)

# 创建备份目录
mkdir -p $BACKUP_DIR

# 备份数据库
mongodump --host localhost --port 27017 --db park_app --out $BACKUP_DIR/mongo_$DATE

# 备份项目文件
tar -czf $BACKUP_DIR/project_$DATE.tar.gz -C /www/wwwroot yourdomain.com

# 删除30天前的备份
find $BACKUP_DIR -type f -mtime +30 -delete

echo "Backup completed at $(date)"
EOF

# 设置执行权限
chmod +x /www/backup.sh

# 添加到crontab
echo "0 2 * * * /www/backup.sh" | crontab -</code>
            </div>
        </section>

        <section id="troubleshooting">
            <h2>9. 常见问题</h2>
            
            <h3>9.1 应用无法启动</h3>
            <div class="code-block">
                <code># 检查PM2状态
pm2 status

# 查看详细错误信息
pm2 logs park-app --lines 50

# 检查端口占用
netstat -tulpn | grep :3000

# 检查Node.js版本
node --version

# 重启应用
pm2 restart park-app</code>
            </div>

            <h3>9.2 数据库连接失败</h3>
            <div class="code-block">
                <code># 检查MongoDB服务状态
systemctl status mongod

# 检查MongoDB日志
tail -f /www/server/mongodb/logs/mongod.log

# 测试数据库连接
mongo --host localhost --port 27017 -u park_user -p your_secure_password park_app

# 重启MongoDB服务
systemctl restart mongod</code>
            </div>

            <h3>9.3 反向代理问题</h3>
            <div class="code-block">
                <code># 检查Nginx配置
nginx -t

# 查看Nginx错误日志
tail -f /www/server/nginx/logs/error.log

# 重启Nginx
systemctl restart nginx

# 检查防火墙状态
systemctl status firewalld</code>
            </div>

            <h3>9.4 SSL证书问题</h3>
            <div class="code-block">
                <code># 手动续期SSL证书
certbot renew --dry-run

# 检查证书状态
openssl x509 -in /www/server/panel/vhost/cert/yourdomain.com/fullchain.pem -text -noout

# 重新申请证书
rm -rf /www/server/panel/vhost/cert/yourdomain.com
bt cert</code>
            </div>

            <h3>9.5 性能问题</h3>
            <div class="code-block">
                <code># 检查系统资源
htop
df -h
free -h

# 检查应用性能
pm2 monit

# 检查数据库性能
mongo --eval "db.runCommand({serverStatus: 1})"

# 优化PM2配置
pm2 scale park-app 4</code>
            </div>
        </section>

        <section id="optimization">
            <h2>10. 性能优化</h2>
            
            <h3>10.1 Node.js优化</h3>
            <div class="code-block">
                <code># 优化PM2配置
module.exports = {
  apps: [{
    name: 'park-app',
    script: 'app.js',
    instances: 'max', // 使用所有CPU核心
    exec_mode: 'cluster',
    max_memory_restart: '1G',
    node_args: '--max-old-space-size=1024',
    env: {
      NODE_ENV: 'production',
      NODE_OPTIONS: '--max-old-space-size=1024'
    }
  }]
};</code>
            </div>

            <h3>10.2 MongoDB优化</h3>
            <div class="code-block">
                <code># 创建索引
db.activities.createIndex({ "location.coordinates": "2dsphere" })
db.activities.createIndex({ "creator": 1, "createdAt": -1 })
db.users.createIndex({ "location.coordinates": "2dsphere" })

# 优化MongoDB配置
echo "
storage:
  wiredTiger:
    engineConfig:
      cacheSizeGB: 2
    collectionConfig:
      blockCompressor: snappy
" >> /www/server/mongodb/mongodb.conf

# 重启MongoDB
systemctl restart mongod</code>
            </div>

            <h3>10.3 Nginx优化</h3>
            <div class="code-block">
                <code># 优化Nginx配置
worker_processes auto;
worker_rlimit_nofile 65535;

events {
    worker_connections 65535;
    use epoll;
    multi_accept on;
}

http {
    # 开启gzip压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    
    # 缓存配置
    proxy_cache_path /www/server/nginx/proxy_cache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m use_temp_path=off;
    
    # 连接优化
    keepalive_timeout 65;
    keepalive_requests 1000;
}</code>
            </div>

            <h3>10.4 系统优化</h3>
            <div class="code-block">
                <code># 优化系统参数
echo "
# 网络优化
net.core.rmem_max = 134217728
net.core.wmem_max = 134217728
net.ipv4.tcp_rmem = 4096 87380 134217728
net.ipv4.tcp_wmem = 4096 65536 134217728
net.ipv4.tcp_congestion_control = cubic
net.ipv4.tcp_tw_reuse = 1
net.ipv4.ip_local_port_range = 1024 65535

# 文件描述符限制
* soft nofile 65536
* hard nofile 65536
" >> /etc/sysctl.conf

# 应用配置
sysctl -p</code>
            </div>

            <div class="success-box">
                <div class="success-box-content">
                    <strong>✅ 优化完成：</strong> 应用性能已优化，建议定期监控和调整配置。
                </div>
            </div>
        </section>

        <div class="footer">
            <p>📧 技术支持：support@yourdomain.com</p>
            <p>📅 文档更新时间：2025年</p>
            <p>🌟 感谢使用线下组局小程序宝塔面板部署指南</p>
            <p>🔗 相关资源：<a href="https://www.bt.cn" target="_blank">宝塔面板官网</a> | <a href="https://nodejs.org" target="_blank">Node.js官网</a> | <a href="https://www.mongodb.com" target="_blank">MongoDB官网</a></p>
        </div>
    </div>
</body>
</html>